import React, { useEffect, useState, memo } from 'react'

// 使用memo 以后父组件更新 index,子组件不会渲染更新
// 没有使用的话，父组件更新 index,子组件也会渲染更新
const ShowName = memo(({ name }) => {
	console.log('render')
	return <div>{name}</div>
})

const App = () => {
	const [name, setName] = useState('张三')
	const [index, setIndex] = useState(0)

	useEffect(() => {
		setInterval(() => {
			setIndex((prev) => prev + 1)
		}, 1000)
	}, [])

	return (
		<div>
			{index}
			<ShowName name={name} />
		</div>
	)
}

export default App
